import './Doing.css'
// function Doing(props){
//   console.log(props)
//   return (
//     <section className='Doing'>
   
//       <h2 className='todo'>待做事项 <span>0</span></h2>
//       <ul>
//         {/* {
//         props.abc.map((item,index)=>{
//            return (
//              <li key={index}>{item}</li>
//            )
//          })
//         } */}
       
//       </ul>
//     </section>
//   )
// }
// export default Doing;
export default function Doing(props){
  const {completeItem}=props

  // console.log(props)
  // function changeState(id){
  //   props.todos.filter(item=>{
  //     if(item.id==id){
  //       item.done=!item.done
  //       console.log(item)
  //     }
  //   })
  // }
  
  return (
    
    <section className='Doing'>
   
      <h2 className='todo'>未完成 <span>{props.unfinished}</span></h2>
      <ul>
        {
          props.todos.map((item)=>{
            if(item.done==false){
              return <li key={item.id}> <input checked={item.done} onChange={()=>{completeItem(item.id)}}  type="checkbox" name="" id="" /><span className='content'>{item.todo}</span><a onClick={
                (e)=>{
                  e.preventDefault()
                 
                  props.data(item.id)
                }
              } href="">-</a></li>
            }
           
          })
        }
      </ul>
    </section>
    
  )
}